<template>
  <div v-loading="ctx.loading">
    <MkBillPanel ref='billPanelRef' printCode='InvRuKu' :bill="ctx.entity">
      <template #button>
        <MkButtonQueryHistory @click="listRef.open()" />
        <MkButtonAdd @click="newEntity" :isEdit='ctx.isEdit' />
        <MkButtonSubmit @click="submit" :loading="ctx.loading" :isEdit="ctx.isEdit" />
        <MkButtonMore>
          <!-- <a-menu-item @click="invalidate">作废</a-menu-item> -->
          <a-menu-item @click="billPanelRef.showCaoZuo()">操作记录</a-menu-item>
        </MkButtonMore>
        <MkButtonMore title="打印" icon="ele-Printer">
          <a-menu-item>
            <el-button v-print="printAllObj" type="text">打印</el-button>
          </a-menu-item>
          <a-menu-item>
            <el-button v-print="printMingXiObj" type="text">打印明细</el-button>
          </a-menu-item>
        </MkButtonMore>
      </template>
      <template #info>
        <MkForm :model='ctx.entity' ref='formRef' formId='InvXieYiYiYuanRuKu' :col="3">
          <el-row>
            <MkInput label='来源单号' v-model.trim='ctx.entity.laiYuanDanHao' prop='laiYuanDanHao' :isEdit='ctx.isEdit'
              append @keyup.enter="getChuKuDanMingXi">
              <template #append>
                <el-button icon="ele-More" :disabled="!ctx.isEdit" @click="chooseChuKuDan"></el-button>
              </template>
            </MkInput>
            <MkSelectBasEntity label='入库院区' v-model='ctx.entity.ruKuYuanQuId' prop='ruKuYuanQuId' :isEdit='false'
              required entity="XieYiYiYuan" />
            <MkInput label='备注' v-model='ctx.entity.remark' prop='remark' :isEdit='ctx.isEdit' :col="2" />
          </el-row>
        </MkForm>
      </template>
      <MkDragSplitPanel rightWidth="40%">
        <template #left>
          <MkPanel title="血液明细" class="component-left">
            <MkTable :data="ctx.mingXiTable">
              <MkColumnIndex />
              <MkColumnXueYe />
              <MkColumnNumber prop="jiaGe" label="价格" width="80px" />
              <MkColumn prop="caiXueShiJian" label="采血时间" min-width="140px" />
              <el-table-column label="操作" width="120px" fixed="right" v-if="ctx.isEdit">
                <template #default="{ row }">
                  <el-button icon="ele-Delete" size="small" text type="danger" @click="deleteBlood(row)">删除</el-button>
                </template>
              </el-table-column>
            </MkTable>
          </MkPanel>
        </template>
        <template #right>
          <MkPanel title="汇总信息" class="component-right">
            <InvBloodSummary :bloodList="ctx.mingXiTable" width="100%" />
          </MkPanel>
        </template>
      </MkDragSplitPanel>
      <!-- <div class="resize-container">
        
        <div class="dividebox" ref="divide1Ref" v-resize="['.component-left', '.component-right']"></div>
        
      </div> -->

    </MkBillPanel>
    <!-- 下面这里用于打印，现在先用页面打印，在这里做排版 -->
    <div style="display: none;">
      <div id="printAll" style="margin: 10px;">
        <MkForm :model='ctx.entity' ref='formRef' formId='InvXieYiYiYuanRuKu' :col="3" style="margin-top: 20px;">
          <el-row>
            <MkInput label='来源单号' v-model.trim='ctx.entity.laiYuanDanHao' prop='laiYuanDanHao' :isEdit='ctx.isEdit'
              append @keyup.enter="getChuKuDanMingXi">
              <template #append>
                <el-button icon="ele-More" :disabled="!ctx.isEdit" @click="chooseChuKuDan"></el-button>
              </template>
            </MkInput>
            <MkSelectBasEntity label='入库院区' v-model='ctx.entity.ruKuYuanQuId' prop='ruKuYuanQuId' :isEdit='false'
              required entity="XieYiYiYuan" />
            <MkInput label='备注' v-model='ctx.entity.remark' prop='remark' :isEdit='ctx.isEdit' :col="2" />
          </el-row>
        </MkForm>
        <InvBloodSummary :bloodList="ctx.mingXiTable" style="margin: 10px 0;" />
        <MkTable :data="ctx.mingXiTable">
          <MkColumnIndex />
          <MkColumnXueYe />
          <MkColumnNumber prop="jiaGe" label="价格" width="80px" />
          <MkColumn prop="caiXueShiJian" label="采血时间" min-width="140px" />
          <el-table-column label="操作" width="120px" fixed="right" v-if="ctx.isEdit">
            <template #default="{ row }">
              <el-button icon="ele-Delete" size="small" text type="danger" @click="deleteBlood(row)">删除</el-button>
            </template>
          </el-table-column>
        </MkTable>
      </div>
      <div id="printMingXi" style="margin: 10px;">
        <MkForm :model='ctx.entity' ref='formRef' formId='InvXieYiYiYuanRuKu' :col="3" style="margin-top: 20px;">
          <el-row>
            <MkInput label='来源单号' v-model.trim='ctx.entity.laiYuanDanHao' prop='laiYuanDanHao' :isEdit='ctx.isEdit'
              append @keyup.enter="getChuKuDanMingXi">
              <template #append>
                <el-button icon="ele-More" :disabled="!ctx.isEdit" @click="chooseChuKuDan"></el-button>
              </template>
            </MkInput>
            <MkSelectBasEntity label='入库院区' v-model='ctx.entity.ruKuYuanQuId' prop='ruKuYuanQuId' :isEdit='false'
              required entity="XieYiYiYuan" />
            <MkInput label='备注' v-model='ctx.entity.remark' prop='remark' :isEdit='ctx.isEdit' :col="2" />
          </el-row>
        </MkForm>
        <MkTable :data="ctx.mingXiTable">
          <MkColumnIndex />
          <MkColumnXueYe />
          <MkColumnNumber prop="jiaGe" label="价格" width="80px" />
          <MkColumn prop="caiXueShiJian" label="采血时间" min-width="140px" />
          <el-table-column label="操作" width="120px" fixed="right" v-if="ctx.isEdit">
            <template #default="{ row }">
              <el-button icon="ele-Delete" size="small" text type="danger" @click="deleteBlood(row)">删除</el-button>
            </template>
          </el-table-column>
        </MkTable>
      </div>
    </div>
    <ListPage ref='listRef' @load='loadEntity' />
  </div>
</template>

<script setup lang='ts' name="invXieYiYiYuanRuKu">
import ListPage from './list.vue'

import {
  ctx,
  formRef, listRef, billPanelRef,
  fnBill, fnMingXi, fnPrint
} from './index'

//  newEntity新建单据, loadEntity加载单据, submit提交, invalidate作废
const { newEntity, loadEntity, submit, invalidate } = fnBill()  // 单据操作

const { chooseChuKuDan, getChuKuDanMingXi, deleteBlood } = fnMingXi() // 选择出库单

const { printAllObj, printMingXiObj } = fnPrint() // 打印

</script>

<style lang='scss' scoped></style>